<template>
  <div class="all">
    <div class="topbg"></div>
    <!-- 111111 -->
    <div class="pwarp1 pwarp"></div>
    <div class="wall">
      <div class="carts1 carts">
        <div class="cart" v-for="i in 15" :key="i">
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
      </div>
    </div>
    <!-- 2222222 -->
    <div class="pwarp2 pwarp"></div>
    <div class="wall">
      <div class="carts2 carts">
        <div class="cart" v-for="i in 9" :key="i">
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
      </div>
    </div>
    <!-- 3333 -->
    <div class="pwarp3 pwarp"></div>
    <div class="wall">
      <div class="carts3 carts">
        <div class="cart" v-for="i in 6" :key="i">
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
      </div>
    </div>
    <!-- 44444444 -->
    <div class="pwarp4 pwarp"></div>
    <div class="three">
      <span class="span1" @click="upthree1">主机</span>
      <span class="span2" @click="upthree2">配件</span>
    </div>
    <div class="wall">
      <div class="carts3 carts">
        <!-- 先显示 -->
        <div class="cart" v-for="i in 6" :key="i" v-show="!cartthree">
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
        <!-- 点击后显示 -->
        <div class="cart" v-for="i in 3" :key="i" v-show="cartthree">
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
        <!-- 5.222 -->
        <div class="cart-f1" v-for="i in 4" :key="i" v-show="cartthree">
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
      </div>
    </div>
    <!-- 55555 -->
    <div class="pwarp5 pwarp"></div>
    <div class="five">
      <span class="cur">X100/s6</span>
      <span>X90/X95</span>
      <span>C50</span>
      <span>T90/S7/S5</span>
    </div>
    <div class="wall">
      <div class="carts5 carts olny">
        <!-- X100/s6 -->
        <div
          class="cart-f1 olnyo nowcur"
          v-for="i in 4"
          :key="i"
          v-show="sweep1"
          id="0"
        >
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
        <!-- 5.222 -->
        <div
          class="cart-f2 olnyo"
          v-for="i in 5"
          :key="i"
          v-show="sweep1"
          id="1"
        >
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
        <!-- X90/X95 -->
        <div
          class="cart-f1 olnyo"
          v-for="i in 8"
          :key="i"
          v-show="sweep2"
          id="2"
        >
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
        <!-- C50 -->
        <div class="cart olnyo" v-for="i in 6" :key="i" v-show="sweep3" id="3">
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
        <!--T90/S7/S5  -->
        <div class="cart olnyo" v-for="i in 3" :key="i" v-show="sweep4" id="4">
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
        <!-- 5222222-->
        <div
          class="cart-f1 olnyo"
          v-for="i in 4"
          :key="i"
          v-show="sweep4"
          id="4"
        >
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
      </div>
    </div>
    <!-- 66666 -->
    <div class="pwarp6 pwarp"></div>
    <div class="wall">
      <div class="carts2 carts">
        <div class="cart" v-for="i in 9" :key="i">
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
      </div>
    </div>
    <!-- 77777 -->
    <div class="pwarp7 pwarp"></div>
    <div class="wall">
      <div class="carts3 carts">
        <div class="cart" v-for="i in 3" :key="i">
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
        <!-- 5.222 -->
        <div class="cart-f1" v-for="i in 4" :key="i">
          <img src="../assets/img/shoplist/tu6.png" alt="" />
          <p>360可视门铃5Pro AR1C</p>
          <span class="sub">2k超清画质 166超广角</span>
          <div>
            ￥<span class="newp">399</span>
            <span class="oldp">￥429</span>
          </div>
          <button>立即购买</button>
        </div>
      </div>
    </div>

    <!-- 右侧360生活馆 -->
    <div class="liveg" v-show="uptop">
      <img src="../assets/img/qiangxinpin/cart.png" alt="" />
      <div class="smback">
        <div @click="update1">
          <p>新品推荐</p>
        </div>
        <div @click="update2">
          <p>家庭安防</p>
        </div>
        <div @click="update3">
          <p>智能路由</p>
        </div>
        <div @click="update4">
          <p>行车记录仪</p>
        </div>
        <div @click="update5">
          <p>扫地机器人</p>
        </div>
        <div @click="update6">
          <p>智能生活</p>
        </div>
        <div @click="update7">
          <p>智能手表</p>
        </div>
      </div>
    </div>
    <!-- 底部tu -->
    <div class="lastpic" id="lastext">
        <img src="../assets/img/qiangxinpin/last.png" alt="" id="img">
    </div>
    <!-- 底部文字 -->
    <p class="lastext">价格说明：因可能存在系统缓存、页面更新导致价格变动异常等不确定性情况出现，商品售价以结算页为准。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartthree: false,
      sweep1: true,
      sweep2: false,
      sweep3: false,
      sweep4: false,
      uptop:false
    };
  },
  mounted() {
    this.change();
    window.addEventListener('scroll',this.handleSrcoll,true)
  },
    destroyed(){
    window.removeEventListener('scroll',this.handleSrcoll)
  },
  methods: {
    // 360行车记录仪
    upthree1() {
      this.cartthree = false;
      console.log(this.cartthree);
    },
    upthree2() {
      this.cartthree = true;
       console.log(this.cartthree);
    },
    // 扫地机器人
    change() {
      let spans = document.querySelectorAll("div.five>span");
      console.log(spans);
      spans.forEach((item, index) => {
        item.onclick = () => {
          let cur = document.querySelector("div.five>span.cur");
          console.log(cur);
          cur.className = "";
          item.className = "cur";
          console.log(index);
          if (index == 0) {
            this.sweep1 = true;
            this.sweep2 = false;
            this.sweep3 = false;
            this.sweep4 = false;
          }
          if (index == 1) {
            this.sweep1 = false;
            this.sweep2 = true;
            this.sweep3 = false;
            this.sweep4 = false;
          }
          if (index == 2) {
            this.sweep1 = false;
            this.sweep2 = false;
            this.sweep3 = true;
            this.sweep4 = false;
          }
          if (index == 3) {
            this.sweep1 = false;
            this.sweep2 = false;
            this.sweep3 = false;
            this.sweep4 = true;
          }
        };
      });
    },
    // 滚动监听~~~~
    handleSrcoll(){
     let scrllTop=window.pageYOffset ||
     document.documentElement.scrollTop ||
     document.body.scrollTop
     console.log(scrllTop);
     if(scrllTop>=750){
        this.uptop=true
      }else{
        this.uptop=false
      } 
       let lasttext=document.getElementById('lastext')
        console.log(lasttext);
      if(scrllTop>=1200 && scrllTop < 9069){
        let lastimg=document.getElementById('img')
        lasttext.style.position='fixed';
        lasttext.style.bottom=0
         lasttext.style.left='50%'
          lasttext.style.transform='translateX(-50%)'
      }else if(scrllTop >= 9069){
        lasttext.style.position=null
        lasttext.style.left=null
          lasttext.style.transform=null
      }  
   },
//    11111
       update1(){
        let scrllTop=window.pageYOffset ||
     document.documentElement.scrollTop ||
     document.body.scrollTop
            // let  timer1= setInterval(() => {
            //     if(scrllTop<=1000)clearInterval(timer1)
            //     scrllTop>1000? scrllTop-=100 : scrllTop+=100
            //     document.documentElement.scrollTop=scrllTop
            // document.body.scrollTop=scrllTop
            // window.pageYOffset=scrllTop
            // }, 10);
       window.pageYOffset=1100
     document.documentElement.scrollTop=1100 
     document.body.scrollTop=1100
      },    
       update2(){
        let scrllTop=window.pageYOffset ||
     document.documentElement.scrollTop ||
     document.body.scrollTop
            // let  timer1= setInterval(() => {
            //     if(scrllTop<=3100 && scrllTop>=2500)clearInterval(timer1)
            //     scrllTop>3100? scrllTop-=100 :scrllTop+=100
            //     document.documentElement.scrollTop=scrllTop
            // document.body.scrollTop=scrllTop
            // window.pageYOffset=scrllTop
            // }, 10);
       window.pageYOffset=3202 
     document.documentElement.scrollTop=3202 
     document.body.scrollTop=3202
      },
        update3(){
                  let scrllTop=window.pageYOffset ||
     document.documentElement.scrollTop ||
     document.body.scrollTop
            // let  timer1= setInterval(() => {
            //     if(scrllTop<=4600 && scrllTop>=4580)clearInterval(timer1)
            //     scrllTop>4600? scrllTop-=100 :scrllTop+=100
            //     document.documentElement.scrollTop=scrllTop
            // document.body.scrollTop=scrllTop
            // window.pageYOffset=scrllTop
            // }, 10);
       window.pageYOffset=4590 
     document.documentElement.scrollTop=4590 
     document.body.scrollTop=4590
        },
        update4(){
                            let scrllTop=window.pageYOffset ||
     document.documentElement.scrollTop ||
     document.body.scrollTop
       window.pageYOffset=5580 
     document.documentElement.scrollTop=5580 
     document.body.scrollTop=5580
        },
        update5(){
            window.pageYOffset=6648 
     document.documentElement.scrollTop=6648 
     document.body.scrollTop=6648
        },
        update6(){
           window.pageYOffset=7687 
     document.documentElement.scrollTop=7687 
     document.body.scrollTop=7687
        },
        update7(){
           window.pageYOffset=9069 
     document.documentElement.scrollTop=9069 
     document.body.scrollTop=9069
        },

  },
};
</script>

<style lang="scss" scoped>
.all {
  background-color: #a91111;
  div.three {
    width: 1008px;
    margin: auto;
    span {
      display: inline-block;
      width: 498px;
      height: 50px;
      font-size: 18px;
      margin-left: 5px;
      text-align: center;
      line-height: 50px;
    }
    span.span1 {
      background-color: rgb(94, 18, 13);
      color: rgb(252, 237, 210);
    }
    span.span2 {
      background-color: rgb(218, 84, 68);
      color: rgb(94, 18, 13);
    }
  }
  div.five {
    width: 1008px;
    margin: auto;
    span {
      display: inline-block;
      width: 248px;
      height: 50px;
      font-size: 18px;
      margin-left: 3px;
      text-align: center;
      line-height: 50px;
      background-color: rgb(218, 84, 68);
      color: rgb(94, 18, 13);
    }
    span.cur {
      background-color: rgb(94, 18, 13);
      color: rgb(252, 237, 210);
    }
  }
  .topbg {
    width: 100%;
    height: 987px;
    background: url("../assets/img/qiangxinpin/first.png") no-repeat center;
    background-size: auto 100%;
    overflow: hidden;
  }

  .pwarp {
    width: 100%;
    height: 237px;
    background-size: auto 100%;
    overflow: hidden;
  }

  .pwarp1 {
    background: url("../assets/img/qiangxinpin/two.png") no-repeat center;
  }

  .pwarp2 {
    background: url("../assets/img/qiangxinpin/one.png") no-repeat center;
  }
  .pwarp3 {
    background: url("../assets/img/qiangxinpin/three.png") no-repeat center;
  }
  .pwarp4 {
    background: url("../assets/img/qiangxinpin/foure.png") no-repeat center;
  }
  .pwarp5 {
    background: url("../assets/img/qiangxinpin/six.png") no-repeat center;
  }
  .pwarp6 {
    background: url("../assets/img/qiangxinpin/seven.png") no-repeat center;
  }
  .pwarp7 {
    background: url("../assets/img/qiangxinpin/eight.png") no-repeat center;
  }

  .wall {
    width: 100%;

    .carts {
      width: 1008px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
    }
    .carts1 {
      height: 1875px;
    }

    .carts2 {
      height: 1135px;
    }
    .carts3 {
      height: 765px;
    }
    .carts5 {
      height: 765px;
    }
    // 55扫地机器人

    .cart-f1 {
      width: 244px;
      background-color: #fbfbfb;
      text-align: center;
      padding: 16px 0;
      margin: 4px;
      // height: 361px;
      img {
        width: 195px;
        height: 195px;
        padding: 0 24.5px;
      }
      p {
        color: #000;
        padding-top: 10px;
      }
      span.sub {
        display: inline-block;
        font-size: 13px;
        color: #999;
        margin: 6px 0 16px;
      }
      div {
        font-size: 14px;
        color: #eb473b;
        margin-bottom: 4px;
        span.newp {
          font-size: 24px;
          color: #eb473b;
        }
        span.oldp {
          color: #666;
          margin-left: 10px;
          text-decoration: line-through;
        }
      }
      button {
        width: 126px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        background-color: #eb473b;
        color: #fff;
      }
    }
    .cart-f2 {
      width: 193.5px;
      background-color: #fbfbfb;
      text-align: center;
      padding: 13px 0 0px;
      margin: 4px;
      // margin: 4px 4px 60px 4px;
      // height: 285px;

      img {
        width: 138px;
        height: 138px;
        padding: 0 26px;
      }
      p {
        color: #000;
        padding-top: 10px;
      }
      span.sub {
        display: inline-block;
        font-size: 13px;
        color: #999;
        margin: 6px 0 4px;
      }
      div {
        font-size: 12px;
        color: #eb473b;
        margin-bottom: 4px;
        span.newp {
          font-size: 18px;
          color: #eb473b;
        }
        span.oldp {
          color: #666;
          margin-left: 10px;
          text-decoration: line-through;
        }
      }
      button {
        width: 126px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        background-color: #eb473b;
        color: #fff;
      }
    }
    //   444及以上
    .cart {
      width: 328px;
      background-color: #fbfbfb;
      text-align: center;
      padding: 16px 0;
      margin: 4px;
      img {
        width: 195px;
        height: 195px;
        padding: 0 66px;
      }
      p {
        color: #000;
        padding-top: 10px;
      }
      span.sub {
        display: inline-block;
        font-size: 13px;
        color: #999;
        margin: 6px 0 16px;
      }
      div {
        font-size: 14px;
        color: #eb473b;
        margin-bottom: 4px;
        span.newp {
          font-size: 24px;
          color: #eb473b;
        }
        span.oldp {
          color: #666;
          margin-left: 10px;
          text-decoration: line-through;
        }
      }
      button {
        width: 126px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        background-color: #eb473b;
        color: #fff;
      }
    }
  }

  //右侧360生活馆
  .liveg {
       width: 180px;
    position: fixed;
        top: 99px;
    left:83vw;
    img {
      width: 180px;
      height: 164px;
    }
    .smback {
      div {
          width: 180px;
          height: 30px;
          text-align: center;
          background: url("../assets/img/qiangxinpin/bacc.png") no-repeat center;
    background-size: auto 100%;
    overflow: hidden;
      p{
          line-height: 30px;
              cursor: pointer;
    font-size: 14px;
    color: #fffbeb;
      }
      }
     div:hover{
       background: url("../assets/img/qiangxinpin/bacc.png") ;
        color: #fde7be;
      }
    }
  }
//   底部tu ~~~~
   .lastpic{
       width: 1000px;
    //    height: 120px;
       margin: auto;
   }
// 底部文字 
   .lastext{
     width: 100%;
     background: #e4e4e4;
    padding: 20px 0;
    text-align: center;
    color: #666;
    font: 12px "微软雅黑",Verdana,SimHei,"Microsoft JhengHei",Tahoma;
   }    
}
</style>
